$渐变: linear-gradient(160deg, rgba(100, 200, 255, 1) 0%, rgba(120, 100, 255, 1) 100%);

header {
    width: 100%;
    height: 3rem;
    box-shadow: 0.125rem 0.125rem 0.25rem 0 rgba($color: #333, $alpha: 0.2);
    z-index: 10;
    position: sticky;
    top: 0;
    user-select: none;
    backdrop-filter: blur(0.25rem);
    .title {
        display: none;
    }
    .top-nav {
        z-index: 10;
        height: 2.8rem;
        position: absolute;
        display: flex;
        .home-icon-a {
            height: 100%;
            width: 2.8rem;
            display: block;
        }
        .menu-btn {
            display: none;
        }
        ul {
            display: flex;
            width: 0;
            li {
                flex-shrink: 0;
                transition: background-color 0.2s;
                height: 2.8rem;
                position: relative;
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 0%;
                    height: 0.25rem;
                    left: 50%;
                    transform: translate(-50%, 0);
                    bottom: 0;
                    transition: all 0.5s ease;
                }
                &:hover,
                &:active,
                &.active {
                    background-color: rgba($color: #ccc, $alpha: 0.6);
                    &::after {
                        background-color: #1fafff;
                        width: 100%;
                    }
                }
                a {
                    display: block;
                    height: 100%;
                    line-height: 2.8rem;
                    padding: 0 1rem;
                }
            }
        }
    }
    .right-btn {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        button {
            margin: 0.4rem;
            display: inline-block;
            width: 2rem;
            height: 2rem;
            text-align: center;
            font-size: 2rem;
            line-height: 2rem;
            color: #1fafff;
            transition: color 0.2s;
            &:hover {
                color: #008cff;
            }
        }
    }
}
@media (max-width: 50rem) {
    header {
        .title {
            display: block;
            text-align: center;
            line-height: 2.8rem;
            margin: 0;
        }
        .top-nav {
            height: 3rem;
            display: block;
            position: absolute;
            top: 0;
            .home-icon-a {
                display: none;
            }
            .menu-btn {
                display: block;
                width: 2.8rem;
                height: 2.8rem;
                padding: 0.3rem;
                box-sizing: border-box;
                cursor: pointer;
                svg {
                    width: 100%;
                    height: 100%;
                }
            }
            &.fold {
                ul {
                    transform: translate(-100%, 0);
                    opacity: 0;
                }
            }
            ul {
                box-shadow: 0.125rem 0.125rem 0.25rem 0 rgba($color: #333, $alpha: 0.2);
                display: block;
                transition: 0.5s ease;
                transition-property: transform, opacity;
                opacity: 1;
                width: auto;
                li {
                    &::after {
                        background-color: #efefef;
                    }
                    a {
                        padding-left: 2rem;
                        padding-right: 5rem;
                        line-height: 2.6rem;
                    }
                }
            }
        }
    }
}

.navigation-bar {
    display: block;
    background-image: $渐变;
    width: 100%;
    height: 0.2rem;
}
